<template>
	<view class="container">
		<!--header-->
		<view class="tui-header-box" :style="{height:height+'px',background:'rgba(255,255,255,'+opcity+')'}">
			<view class="tui-header" :style="{paddingTop:top+'px', opacity:opcity}">
				商品详情 
			</view>
			<view class="tui-header-icon" :style="{marginTop:top+'px'}">
				<view class="tui-icon tui-icon-arrowleft tui-icon-back" :style="{color:opcity>=1?'#000':'#fff',background:'rgba(0, 0, 0,'+iconOpcity+')'}"
				 @tap="back"></view>
				<view class="tui-icon tui-icon-more-fill  tui-icon-ml" :style="{color:opcity>=1?'#000':'#fff',background:'rgba(0, 0, 0,'+iconOpcity+')',fontSize:'20px'}"
				 @tap.stop="openMenu"></view>
				<tui-badge type="red" size="small" v-if="cart_num>0">{{cart_num}}</tui-badge>
			</view>
		</view>
		<!--header-->
		<!--banner-->
		<view class="tui-banner-swiper" v-if="images_length>0">
			<swiper :autoplay="true" :interval="5000" :duration="150" :circular="true" :style="{height:scrollH + 'px'}" @change="bannerChange">
				<block v-for="(item,index) in product_info_list.images" :key="index">
					<swiper-item :data-index="index" @tap.stop="previewImage">
						<image :src="item.url" class="tui-slide-image" :style="{height:scrollH+'px'}" />
					</swiper-item>
				</block>
			</swiper>
			<tui-tag type="translucent" shape="circleLeft" size="small">{{bannerIndex+1}}/{{images_length}}</tui-tag>
		</view>
		<!--banner-->

		<view class="tui-pro-detail">
			<view class="tui-product-title tui-border-radius">
				<view class="tui-pro-pricebox tui-padding">
					<view class="tui-pro-price">
						<view>￥<text class="tui-price">{{money}}</text></view>
						<tui-tag size="small" :plain="true" type="high-green" shape="circle">新品</tui-tag>
					</view>
				</view>
				<view class="tui-original-price tui-gray">
					价格
					<text class="tui-line-through">￥{{bazaar_money}}</text>
				</view>
				<view class="tui-pro-titbox">
					<view class="tui-pro-title">{{product_info_list.name}}</view>
				</view>
				<view class="tui-padding">
					<view class="tui-sale-info tui-size tui-gray">
						<view>销量：{{product_info_list.sales}}</view>
					</view>
				</view>
			</view>
			<view class="tui-basic-info tui-mtop tui-radius-all">
				<view class="tui-list-cell" @tap="showPopup">
					<view class="tui-bold tui-cell-title">已选</view>
					<view class="tui-selected-box">{{product_info_list.name}},{{sku_str}}{{value}}个。</view>
					<tui-icon name="more-fill" :size="20" class="tui-right" color="#666"></tui-icon>
				</view>
				<view class="tui-list-cell" @tap="location_click">
					<view class="tui-bold tui-cell-title">收货地址</view>
					<view class="tui-addr-box">
						<view class="tui-addr-item">{{location?location:'请设置收货地址'}}</view>
					</view>
					<tui-icon name="more-fill" :size="20" class="tui-right" color="#666"></tui-icon>
				</view>
				<view class="tui-list-cell tui-last">
					<view class="tui-bold tui-cell-title">运费</view>
					<view class="tui-selected-box">{{postage>0?postage:'在线支付免运费'}}</view>
				</view>
			</view>

			<view class="tui-cmt-box tui-mtop tui-radius-all">
				<view class="tui-list-cell tui-last">
					<view class="tui-bold tui-cell-title">评价</view>
					<view class="tui-selected-box">{{product_info_list.product_comment_to_count}}条</view>
				</view>
				
				<view class="tui-cmt-content tui-padding" v-if="product_info_list.product_comment_to_count>0">
					<view class="tui-cmt-user">
						<image :src="product_info_list.product_comment_to.image_url" class="tui-acatar"></image>
						<view>{{product_info_list.product_comment_to.nick_name}}</view>
					</view>
					<view class="tui-cmt">{{product_info_list.product_comment_to.content}}</view>
				</view>

				<view class="tui-cmt-btn" v-if="product_info_list.product_comment_to_count>0">
					<tui-tag type="black" :plain="true" tui-tag-class="tui-tag-cmt" @tap="product_comments_list">查看全部评价</tui-tag>
				</view>
				
			</view>
			<view class="tui-product-img tui-radius-all">
				<rich-text :nodes="product_info_list.content"></rich-text>
			</view>
			<view class="tui-safearea-bottom"></view>
		</view> 

		<!--底部操作栏-->
		<view class="tui-operation">
			<view class="tui-operation-left tui-col-5">
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<tui-icon name="kefu" :size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">客服</view>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150" @tap="cart">
					<tui-icon name="cart" :size="22" color='#333'></tui-icon>
					<view class="tui-operation-text tui-scale-small">购物车</view>
					<tui-badge type="danger" size="small" v-if="cart_num>0">{{cart_num>99?'99+':cart_num}}</tui-badge>
				</view>
				<view class="tui-operation-item" hover-class="opcity" :hover-stay-time="150">
					<view class="tui-collection tui-size" @tap="collecting">
						<view class="tui-icon tui-icon-collection" :class="['tui-icon-'+(collected?'like-fill':'like')]" :style="{color:collected?'#ff201f':'#333',fontSize:'20px'}"></view>
						<view class="tui-operation-text tui-scale-small">收藏</view>
					</view>
				</view>
			</view>
			<view class="tui-operation-right tui-right-flex tui-col-7 tui-btnbox-4">
				<view class="tui-flex-1">
					<tui-button type="danger" shape="circle" size="mini" @click="showPopup">加入购物车</tui-button>
				</view>
				<view class="tui-flex-1">
					<tui-button type="warning" shape="circle" size="mini" @click="showPopup">立即购买</tui-button>
				</view>
			</view>
		</view>


		<!--底部操作栏--->

		<!--顶部下拉菜单-->
		<tui-top-dropdown tui-top-dropdown="tui-top-dropdown" bgcolor="rgba(76, 76, 76, 0.95)" :show="menuShow" :height="0"
		 @close="closeMenu">
			<view class="tui-menu-box tui-padding">
				<view class="tui-menu-header" :style="{paddingTop:top+'px'}">
					功能直达
				</view>
				<view class="tui-menu-itembox">
					<block v-for="(item,index) in topMenu" :key="index">
						<view class="tui-menu-item" hover-class="tui-opcity" :hover-stay-time="150" @tap="common" :data-index="index">
							<view class="tui-badge-box">
								<tui-icon :name="item.icon" color="#fff" :size="item.size"></tui-icon>
								
								<tui-badge type="red" tui-badge-class="tui-menu-badge" size="small" v-if="item.badge>0">{{item.badge>99?'99+':item.badge}}</tui-badge>
							</view>
							<view class="tui-menu-text">{{item.text}}</view>
						</view>
					</block>
				</view>
				<view class="tui-icon tui-icon-up" style="color: #fff; font-size: 26px;" @tap.stop="closeMenu"></view>
			</view>
		</tui-top-dropdown>
		<!---顶部下拉菜单-->

		<!--底部选择层-->
		<tui-bottom-popup :show="popupShow" @close="hidePopup">
			<view class="tui-popup-box">
				<view class="tui-product-box tui-padding">
					<image :src="url" class="tui-popup-img"></image>
					<view class="tui-popup-price">
						<view class="tui-amount tui-bold">￥{{money}}</view>
						<view class="tui-number tui-line-through">￥{{bazaar_money}}</view>
					</view>
				</view>
				<scroll-view scroll-y class="tui-popup-scroll">
					<view class="tui-scrollview-box" v-if="product_info_list.specs_status>0">
						<view v-for="(item,index) in product_info_list.attrbute_list" :key="index">
							<view class="tui-bold tui-attr-title">{{item.name}}</view>
							<view class="tui-attr-box">
								<view v-for="(it,ind) in item.sub" :key="ind" :class="sku[index]==it.id?'tui-attr-item tui-attr-active':'tui-attr-item'" :data-id="it.id" :data-index="index" @click="sku_click">
									{{it.name}}
								</view>
							</view>
						</view>
					</view>
					<view class="tui-number-box tui-bold tui-attr-title">
						<view class="tui-attr-title">数量</view>
						<uni-number-box :value="value" :min="1" :max="99" @change="change"></uni-number-box>
					</view>
				</scroll-view>
				<view class="tui-operation tui-operation-right tui-right-flex tui-popup-btn">
					<tui-button type="red" tui-button-class="tui-btn-equals" shape="circle" size="mini" class="tui-flex-1" @click="add_cart">加入购物车</tui-button>
					<tui-button type="warning" tui-button-class="tui-btn-equals" shape="circle" size="mini" class="tui-flex-1" @click="add_product_order">立即购买</tui-button>
				</view>
				<view class="tui-icon tui-icon-close-fill tui-icon-close" style="color: #999;font-size:20px" @tap="hidePopup"></view>
			</view>
		</tui-bottom-popup>
		<!--底部选择层-->

	</view>
</template>
<script>
	import tuiIcon from "@/components/icon/icon"
	import tuiTag from "@/components/tag/tag"
	import tuiBadge from "@/components/badge/badge"
	import tuiButton from "@/components/button/button"
	import tuiTopDropdown from "@/components/top-dropdown/top-dropdown"
	import tuiBottomPopup from "@/components/bottom-popup/bottom-popup"
	import uniNumberBox from "@/components/uni-number-box/uni-number-box"
	
	import ProductDetail from './product_detail-model.js'   
	var product_detail = new ProductDetail();  
	export default {
		components: {
			tuiIcon,
			tuiTag,
			tuiBadge,
			tuiButton,
			tuiTopDropdown,
			tuiBottomPopup,
			uniNumberBox
			
		},
		data() {
			return {
				id:'',//商品id
				height: 64, //header高度
				top: 0, //标题图标距离顶部距离
				scrollH: 0, //滚动总高度
				opcity: 0,
				iconOpcity: 0.5,
				product_info_list: [],//商品数据
				images_length:0,//轮播图总个数
				bannerIndex: 0,
				index:0,//默认选中规格
				bazaar_money:'',//市场价 
				money:'',//价格
				postage:'',//邮费
				url:'',//商品图片
				sku:[],//当前选中的商品规格
				sku_str:'',//当前选择商品的详情
				cart_num:0,//购物车数量
				location:'',//我的收获地址
				topMenu: [{
					icon: "message",
					text: "消息",
					size: 26,
					badge: 0
				}, {
					icon: "home",
					text: "首页",
					size: 23,
					badge: 0
				}, {
					icon: "people",
					text: "我的",
					size: 26,
					badge: 0
				}, {
					icon: "cart",
					text: "购物车",
					size: 23,
					badge: 0
				}, {
					icon: "kefu",
					text: "客服小蜜",
					size: 26,
					badge: 0
				}, {
					icon: "feedback",
					text: "我要反馈",
					size: 23,
					badge: 0
				}, {
					icon: "share",
					text: "分享",
					size: 26,
					badge: 0
				}],
				menuShow: false,
				popupShow: false,
				value: 1,
				collected: false 
			}
		},
		onLoad: function(options) {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			var that = this;
			that.id = options.id;	
			uni.getSystemInfo({
				success: (res) => {
					that.width = obj.left || res.windowWidth;
					that.height = obj.top ? (obj.top + obj.height + 8) : (res.statusBarHeight + 44);
					that.top = obj.top ? (obj.top + (obj.height - 32) / 2) : (res.statusBarHeight + 6);
					that.scrollH = res.windowWidth
				}
			})
			that.product_info();
		},
		onShow(){
			var that = this;
			that.get_user_site();
		},
		methods: {
			get_user_site(){
				var that = this;
				product_detail.get_user_site((res)=>{
					if(res.code == 8888){
						that.location = res.data.location;
					}
				})
			},
			product_info(){
				var that = this;
				product_detail.product_info(that.id,(res)=>{
					if(res.code == 8888){
						console.log(res.data);
						res.data.content = res.data.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto" ');
						that.product_info_list = res.data;
						that.images_length = res.data.images.length;
						that.bazaar_money = res.data.product_spec_to[that.index].bazaar_money;
						that.money = res.data.product_spec_to[that.index].money;
						that.postage = res.data.product_spec_to[that.index].postage;
						that.sku = res.data.product_spec_to[that.index].sku.split(',');
						product_detail.sku_str(that);
						that.url = res.data.images[0].url;
						that.collected = res.data.collected;
						that.cart_num = res.data.cart_num;
						that.topMenu[3].badge = res.data.cart_num;
					}
				})
			},
			//sku选择
			sku_click(e){
				var that = this;
				var index = product_detail.get_data_set(e,'index');
				that.sku[index] = product_detail.get_data_set(e,'id');
				var sku = that.sku.join(',');
				for(var i=0;i<that.product_info_list.product_spec_to.length;i++){
					if(that.product_info_list.product_spec_to[i].sku == sku){
						that.bazaar_money = that.product_info_list.product_spec_to[i].bazaar_money * that.value;
						that.bazaar_money = that.bazaar_money.toFixed(2);
						that.money = that.product_info_list.product_spec_to[i].money * that.value;
						that.money = that.money.toFixed(2);
						that.postage = that.product_info_list.product_spec_to[i].postage; 
						product_detail.sku_str(that);
						that.index = i;
					}
				}
			},
			//加入购物车
			add_cart(){
				var that = this;
				var product_id = that.id;//商品id
				var specs_id = that.product_info_list.product_spec_to[that.index].id;//规格数据id
				product_detail.add_cart({product_id:product_id,specs_id:specs_id,num:that.value,specs:that.sku_str},(res)=>{
					if(res.code === 8888){
						product_detail.show_tips({title:res.msg});
						that.cart_num = res.data.cart_num;
						that.topMenu[3].badge = res.data.cart_num;
						that.popupShow = false;
					}
				})
			},
			//商品详情立即购买
			add_product_order(){
				var that = this;
				var product_id = that.id;//商品id
				var specs_id = that.product_info_list.product_spec_to[that.index].id;//规格数据id
				product_detail.add_product_order({product_id:product_id,specs_id:specs_id,num:that.value,specs:that.sku_str},(res)=>{
					if(res.code === 8888){
						that.popupShow = false;
						product_detail.show_tips({title:res.msg});
						//console.log(res.data.id);
						product_detail.navigate_to('../order/order');
					}
				})
			},
			//轮播图
			bannerChange(e) {
				this.bannerIndex = e.detail.current
			},
			//返回
			back: function() {
				product_detail.navigate_back()
			},
			openMenu: function() {
				this.menuShow = true
			},
			closeMenu: function() {
				this.menuShow = false
			},
			showPopup: function() {
				this.popupShow = true
			},
			hidePopup: function() {
				this.popupShow = false
			},
			//数量加减
			change: function(e) {
				var that = this;
				that.value = e;
				var sku = that.sku.join(',');
				for(var i=0;i<that.product_info_list.product_spec_to.length;i++){
					if(that.product_info_list.product_spec_to[i].sku == sku){
						that.bazaar_money = that.product_info_list.product_spec_to[i].bazaar_money * that.value;
						that.money = that.product_info_list.product_spec_to[i].money * that.value;
						that.bazaar_money = that.bazaar_money.toFixed(2);
						that.money = that.money.toFixed(2);
					}
				}
			},
			//收藏
			collecting: function() {
				var that = this;
				product_detail.product_collect(that.id,(res)=>{
					if(res.code == 8888){
						that.collected = !that.collected;
					}
				})
				
			},
			//查看全部评论
			product_comments_list(){
				var that = this;
				product_detail.navigate_to('../product_comments_list/product_comments_list?id='+that.id);
			},
			common(e){
				var that = this;
				var index = product_detail.get_data_set(e,'index');
				if(index==0 || index == 4 || index == 5 || index == 6){
					product_detail.show_tips({title:'开发中...'});
				}else if(index == 1){
					product_detail.switch_tab('../index/index');
				}else if(index == 2){
					product_detail.switch_tab('../my/my');
				}else if(index == 3){
					product_detail.switch_tab('../cart/cart');
				}
			},
			cart(){
				product_detail.switch_tab('../cart/cart');
			},
			location_click(){
				product_detail.navigate_to('../location/location');
			}
		},
		onPageScroll(e) {
			let scroll = e.scrollTop <= 0 ? 0 : e.scrollTop;
			let opcity = scroll / this.scrollH;
			if (this.opcity >= 1 && opcity >= 1) {
				return;
			}
			this.opcity = opcity;
			this.iconOpcity = 0.5 * (1 - opcity < 0 ? 0 : 1 - opcity);
		}
		
	}
</script>

<style>
	@import url("product_detail.css");
</style>
